<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:model="queryData"
				label-width="100px"
				label-suffix=":"
				:inline="true"
			>
				<el-form-item label="会员账号">
					<el-input
						v-model.trim="queryData.userName"
						v-input="{ name: 'noEmpty' }"
						clearable
						style="width: 180px"
						placeholder="请输入会员账号"
					></el-input>
				</el-form-item>

				<el-form-item label="账变类型">
					<el-select
						v-model="queryData.changeTypeList"
						clearable
						:placeholder="$t('common.select_all')"
						multiple
						style="width:270px"
					>
						<el-option
							v-for="item in squidWalletChangeTypes"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="收支类型">
					<el-select
						v-model="queryData.changeDirectionList"
						clearable
						:placeholder="$t('common.select_all')"
						multiple
						style="width:180px"
					>
						<el-option
							v-for="item in squidWalletChangeDirections"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="账变时间">
					<el-date-picker
						:clearable="false"
						v-model="searchTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						value-format="timestamp"
						style="width: 430px"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="帐变金额">
					<el-input
						v-model="queryData.changeAmountMin"
						size="medium"
						:placeholder="$t('common.minimum')"
						style="width: 130px"
						maxLength="10"
						v-input="{ name: 'onlyTwoNum' }"
						name="changeAmountMin"
						clearable
						@blur="
							handleAmount(
								queryData,
								1,
								'changeAmountMin',
								'changeAmountMax',
								$t('member.check_min_tips')
							)
						"
					></el-input>
					-
					<el-input
						v-model="queryData.changeAmountMax"
						size="medium"
						:placeholder="$t('common.maximum')"
						style="width: 130px"
						maxLength="10"
						v-input="{ name: 'onlyTwoNum' }"
						name="changeAmountMax"
						clearable
						@blur="
							handleAmount(
								queryData,
								2,
								'changeAmountMin',
								'changeAmountMax',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90750106')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="exportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<el-button
						v-if="hasPermission('90870097')"
						type="success"
						icon="el-icon-sort"
						size="medium"
						@click="showColumnSet"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="refTable"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%;"
				:max-height="tableHeight"
				highlight-current-row
				header-align="center"
				:header-cell-style="getRowClass"
				@sort-change="handleTableSort"
				show-summary
				:summary-method="
					(val) => handleRow(val, subSummary, totalSummary)
				"
			>
				<el-table-column
					align="center"
					label="会员账号"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="账变类型"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							getTypeName(
								scope.row.changeType,
								squidWalletChangeTypes
							) || '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.direction]"
					align="center"
					label="收支类型"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							getTypeName(
								scope.row.direction,
								squidWalletChangeDirections
							) || '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.changeBefore]"
					align="center"
					label="账变前余额"
					prop="changeBefore"
					sortable="custom"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.changeBefore
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.changeAmount]"
					align="center"
					label="账变金额"
					prop="changeAmount"
					sortable="custom"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.changeAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.changeAfter]"
					align="center"
					label="账变后余额"
					prop="changeAfter"
					sortable="custom"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.changeAfter
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.time]"
					align="center"
					label="账变时间"
					min-width="160"
					show-overflow-tooltip
					prop="time"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.time || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[tableColumns.remark]"
					align="center"
					label="备注"
					min-width="270"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.remark || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-if="total"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
		</template>
		<TableColumnSet
			v-if="colSettings.visible"
			:visible.sync="colSettings.visible"
			:dialogColumnData="dialogColumnData"
			:activityListField="activityListField"
			@submitColumnSet="submitColumnSet"
			@choiceColumnSet="choiceColumnSet"
		></TableColumnSet>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import summaryList from './components/summaryList'
import { squidWalletChangeTypes, squidWalletChangeDirections } from '@/dict/dxn'
import { tableColumns } from './components/tableColumn'
import TableColumnSet from '@/components/Dxn/TableColumnSet'
import dxnMixin from '@/mixins/dxnMixin'
const start = () =>
	dayjs()
		.startOf('day')
		.subtract(6, 'day')
const end = () => dayjs().endOf('day')
export default {
	name: routerNames.squidWalletRecord,
	components: {
		TableColumnSet,
		MainContent
	},
	mixins: [list, summaryList, dxnMixin],
	data() {
		return {
			dataList: [],
			subSummary: {},
			totalSummary: {},
			loading: false,
			exportBtnLoading: false,
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				userName: undefined,
				changeTypeList: [],
				changeDirectionList: [],
				changeAmountMin: undefined,
				changeAmountMax: undefined
			},
			searchTime: [start(), end()],
			squidWalletChangeTypes,
			squidWalletChangeDirections,
			tableColumns
		}
	},
	created() {
		this.initIndexDB('squidWalletRecord', this.activityListField)
	},
	methods: {
		getSearchParam() {
			const searchTime = this.searchTime || []
			const params = {
				...this.queryData,
				startDate: searchTime[0]
					? dayjs(searchTime[0]).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				endDate: searchTime[1]
					? dayjs(searchTime[1]).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			if (!params.changeTypeList?.length) {
				params.changeTypeList = undefined
			}
			if (!params.changeDirectionList?.length) {
				params.changeDirectionList = undefined
			}
			if (isNaN(params?.changeAmountMin)) {
				params.changeAmountMin = undefined
			}
			if (isNaN(params?.changeAmountMax)) {
				params.changeAmountMax = undefined
			}
			return params
		},
		loadData() {
			this.loading = true
			this.dataList = []
			this.subSummary = {}
			this.totalSummary = {}
			const params = this.getParams(this.getSearchParam())
			this.$api
				.getSquidWalletRecordBend(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.dataList = res?.data?.record
						this.total = res?.data?.totalRecord
						const summary = res?.data?.summary || []
						this.subSummary = summary[0] || {}
						this.totalSummary = summary[1] || {}
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.clearTableSort()
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.resetQueryData()
			this.pageNum = 1
			this.searchTime = [start(), end()]
			this.loadData()
		},
		exportExcel() {
			const params = this.getParams(this.getSearchParam())
			this.deleteExportParams(params)
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'exportSquidWalletRecordBend',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
